<template>
    <div>
        <template>
            <el-form :inline="true" :model="projectEditForm" :rules="projectEditFormRules" ref="projectEditForm">
                <h3>
                    基本信息
                </h3>
                <el-row :gutter="20">
                    <el-col :span="7">
                        <div>
                            <el-form-item label="项目名称：" prop="name">
                                <el-input v-model="projectEditForm.name"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <div>
                            <el-form-item label="应用领域：">
                                <el-select v-model="projectEditForm.applicationArea" placeholder="请选择">
                                    <el-option label="移动开发" value="移动开发"></el-option>
                                    <el-option label="网站开发" value="网站开发"></el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <div>
                            <el-row>
                                <el-col>
                                    <el-form-item label="项目周期：" prop="cycle">
                                        <el-input v-model="projectEditForm.cycle"></el-input>
                                    </el-form-item>
                                    <el-form-item prop="cycleName">
                                            <el-radio-group v-model="projectEditForm.cycleName">
                                                <el-radio-button label="天"></el-radio-button>
                                                <el-radio-button label="周"></el-radio-button>
                                                <el-radio-button label="月"></el-radio-button>
                                            </el-radio-group>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <div>
                            <el-form-item label="岗位需求：">
                                <el-input></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="7">
                        <div>
                            <el-form-item label="技能要求：" >
                                 <el-select v-model="projectEditForm.skills"  placeholder="请输入标签">
                                    <el-option v-for="item in projectEditForm.skillList" :key="item.type" :label="item.skill" :value="item.type">
                                    </el-option>
                                </el-select>
                            </el-form-item>
                        </div>
                    </el-col>
                    <el-col :span="10">
                        <div>
                            <el-form-item label="项目预算：" prop="">
                                 <el-input v-model="projectEditForm.budgetMin"></el-input>
                                 <el-input v-model="projectEditForm.budgetMax"></el-input>
                            </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <h3>需求描述</h3>
                <el-row :gutter="20">
                    <el-col :span="24">
                        <div class="editor-wrapper">
                              <el-form-item label="" prop="prd" >
                                <div class="editor-content">
                                    <tinymce :height=200 ref="editor" v-model="projectEditForm.prd"></tinymce>
                                </div>
                          </el-form-item>
                        </div>
                    </el-col>
                </el-row>
                <h4>附件</h4>
                <div>
                    <el-upload class="upload-demo" drag action="" multiple>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
                        <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
                    </el-upload>
                </div>
                <h3 class="mt-20">发包倾向</h3>
                <div class="mt-10">

                    <el-form-item label="所在地域" prop="tendencyProvince">
                        <el-select  placeholder="请选择省份" v-model="projectEditForm.tendencyProvince"  @change="changeProvince">
                                <el-option v-for="item in regionList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"></el-option>

                        </el-select>
                    </el-form-item>
                    <el-form-item label="" prop="tendencyCity">
                        <el-select placeholder="请选择城市" v-model="projectEditForm.tendencyCity" >
                                <el-option v-for = "item in cityList"
                                :key="item.id"
                                :label="item.name"
                                :value="item.id"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="接包方" prop="tendencyType">
                        <el-radio class="radio" v-model="projectEditForm.tendencyType" :label="1" >不限</el-radio>
                        <el-radio class="radio" v-model="projectEditForm.tendencyType" :label="2" >个人</el-radio>
                        <el-radio class="radio" v-model="projectEditForm.tendencyType" :label="3" >企业</el-radio>
                    </el-form-item>
                    <el-form-item label="发票" prop="invoice">
                        <el-radio class="radio" v-model="projectEditForm.invoice" label="1" >需要</el-radio>
                        <el-radio class="radio" v-model="projectEditForm.invoice" label="2" >不需要</el-radio>
                    </el-form-item>
                </div>
                <h3 class="mt-20">联系信息</h3>
                <div class="mt-10">
                    <el-form-item label="联系人" prop="contact.linkman" >
                        <el-input v-model="projectEditForm.contact.linkman"></el-input>
                    </el-form-item>
                    <el-form-item label="联系电话" prop="contact.mobile">
                        <el-input v-model="projectEditForm.contact.mobile"></el-input>
                    </el-form-item>
                    <el-form-item label="电子邮箱" prop="contact.email">
                        <el-input v-model="projectEditForm.contact.email"></el-input>
                    </el-form-item>
                </div>
                <div class="mt-20 text-center">
                    <el-form-item>
                        <el-button type="primary" @click="submitProjectEditForm('projectEditForm')">确认</el-button>
                        <el-button  @click="back">返回 </el-button>
                    </el-form-item>
                </div>
            </el-form>
        </template>
    </div>
</template>

<script>
    import {
        getdetail,
        postManagerModify
    } from '@/api/project.js'
    import {
        getRegionList
    } from '@/api/user.js'

    import tinymce from '@/components/public/tinymce/index.vue'
    export default {
        created () {
            let id = this.$route.params.id
            this.fetchProjectDetail(id)
            this.showgetRegionList()
        },
        data () {
            // 手机号码验证
            let checkPhone = (rule, value, callback) => {
                let pattern = /(13\d|14\d|15\d|17\d|18\d)\d{8}/
                if (value) {
                    if (!pattern.test(value) || value.length !== 11) {
                        return callback(new Error('请输入正确的11位手机号码'))
                    } else {
                        callback()
                    }
                } else {
                    callback()
                }
            }
            let checkEmail = (rule, value, callback) => {
                let pattern = /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/
                if (value) {
                    if (!pattern.test(value)) {
                        return callback(new Error('请输入正确的电子邮箱地址'))
                    } else {
                        callback()
                    }
                } else {
                    callback()
                }
            }
            return {
                regionList: [],
                cityList: [],
                projectEditForm: {
                    name: '',
                    applicationArea: '',
                    cycle: '',
                    cycleName: '',
                    prd: '',
                    skills: [],
                    budgetMin: '',
                    budgetMax: '',
                    content: '',
                    tendencyType: 1,
                    invoice: 1,
                    contact: {
                        linkman: '',
                        email: '',
                        mobile: ''
                    }
                },
                skills: [],
                skillList: [],
                projectEditFormRules: {
                    name: {
                        required: true,
                        message: '请填写项目名称',
                        trigger: 'blur'
                    },
                    applicationArea: {
                        required: true,
                        message: '请填写应用领域',
                        trigger: 'change'
                    },
                    cycle: {
                        required: true,
                        message: '请填写项目周期',
                        trigger: 'blur'
                    },
                    cycleName: {
                        required: true,
                        message: '请选择项目周期',
                        trigger: 'change'
                    },
                    prd: {
                        required: true,
                        message: '请填写岗位名称',
                        trigger: 'blur'
                    },
                    skills: {
                        required: true,
                        message: '请填写技能要求',
                        trigger: 'blur',
                        type: 'array'
                    },
                    budgetMin: {
                        required: true,
                        message: '请填写项目预算',
                        trigger: 'change'
                    },
                    budgetMax: {
                        required: true,
                        message: '请填写项目预算',
                        trigger: 'change'
                    },
                    content: {
                        required: true,
                        message: '请填写需求描述',
                        trigger: 'change'
                    },
                    tendencyType: {
                        required: true,
                        message: '请选择接包方倾向',
                        trigger: 'change',
                        type: 'number'
                    },
                    invoice: {
                        required: true,
                        message: '请选择是否需要发票',
                        trigger: 'change'
                    },
                    'contact.linkman': {
                        required: true,
                        message: '联系人信息',
                        trigger: 'blur'
                    },
                    'contact.mobile': [{
                        required: true,
                        message: '请填写联系电话',
                        trigger: 'blur'
                    },
                    {
                        validator: checkPhone,
                        trigger: 'blur'
                    }
                    ],
                    'contact.email': [{
                        required: true,
                        message: '请填写电子邮箱',
                        trigger: 'blur'
                    },
                    {
                        validator: checkEmail,
                        trigger: 'blur'
                    }]
                }
            }
        },
        methods: {
            // 获取项目信息
            fetchProjectDetail (id) {
                getdetail({id}).then((response) => {
                    if (response.data.code === 0) {
                        let d = response.data.data
                        this.projectEditForm = d
                        this.projectEditForm.skillList = d.skillList
                    }
                })
            },
            showgetRegionList () {
                getRegionList().then(data => {
                    console.log('111111111111')
                    this.regionList = data.data.data
                })
            },
            changeProvince (Province) {
                this.projectEditForm.tendencyCity = ''
                for (let i = 0; i < this.regionList.length; i++) {
                    if (this.regionList[i].id === Province) {
                        this.cityList = this.regionList[i].data
                    }
                }
            },
            submitProjectEditForm: function (formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        postManagerModify(this.projectEditForm).then((response) => {
                            if (response.data.code === 0) {
                                this.$message('保存成功')
                            }
                        })
                    }
                })
            },
            back () {
                history.back()
            }
        },
        components: {
            tinymce
        }
    }

</script>

<style scoped>
    .editor-content {
        margin-top: 20px;
        width: 100%;
    }

</style>
